<template>
  <div>
    <div>
      <span class="left"><van-icon name="arrow-left" @click="leftHello" /></span>
      <span class="my_fang">房子入口</span>
      <img src="../../../../public/image/roomimg/room (1).png" alt="" class="my_img1">
      <div class="my_zhifont">
        <div class="my_num">2</div>
        <div>
          <img src="../../../../public/font/zuo.svg" alt="" @click="">
        </div>
        <div @click="room">
          <img src="../../../../public/font/yuan.svg" alt="">
        </div>
        <div @click="Livingroom">
          <img src="../../../../public/font/you.svg" alt="">
        </div>
      </div>
    </div>
    <div class="my_jiacontent">
      <div>
        <div class="my_zi">家庭成员</div>
        <div>
          <div class="my_jiaru">
            <div>
              <img src="../../../../public/image/headimg/head (1).png" alt="">
              <img src="../../../../public/image/headimg/head (2).png" alt="">
              <img src="../../../../public/image/headimg/head (3).png" alt="">
              <img src="../../../../public/image/headimg/head (5).png" alt="">
            </div>
            <div>
              <button class="my_btn">+</button>
            </div>
          </div>
          <span class="my_zi">只有经过授权的会员才能访问控制应用程序和设备添加这个部分</span>
        </div>
      </div>
      <div class="my_she">
        <span>设备</span>
      </div>
      <div class="my_kuanbox">
        <div class="my_kuan" @click="equipment">
          <div class="my_kai">
            <div>NO</div>
            <div><van-switch v-model="checked1" active-color="#7033FF" inactive-color="#FB8F66" /></div>
          </div>
          <div class="my_cont">
            <span class="iconfont icon-deng"></span>
            <p>客厅灯</p>
            <span>功率235w</span>
          </div>
        </div>
        <div class="my_kuan">
          <div class="my_kai">
            <div>NO</div>
            <div><van-switch v-model="checked2" active-color="#7033FF" inactive-color="#FB8F66" /></div>
          </div>
          <div class="my_cont">
            <span class="iconfont icon-luyouqi"></span>
            <p>路由器</p>
            <span>91.59Mbit/s</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import router from '../../../router';

let checked1 = ref(false)
let checked2 = ref(false)
const equipment = () => {
  router.push('./equipment')
}
const leftHello = () => {
  router.push('./Hello')
}
const room = () => {
  router.push('./Myroom')
}
const Livingroom = () => {
  router.push('./Livingroom')
}
</script>

<style lang="scss" scoped>
.left {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: white;
  font-size: 2rem;
}

.my_fang {
  position: absolute;
  top: 13rem;
  left: 16.5rem;
  color: #FFFFFF;
}

.my_num {
  width: 3.2rem;
  height: 3.2rem;
  background-color: #FB8F66;
  border-radius: 50%;
  text-align: center;
  line-height: 3rem;
  color: white;
}

.my_img1 {
  width: 100%;
  height: 20rem;
}

.my_zhifont {
  width: 15rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 16rem;
  left: 12.4rem;

}

.my_jiacontent {
  padding: 1rem;
  line-height: 3rem;

  .my_she {
    color: #352C5D;
    margin-top: 2rem;
  }

  .my_jiaru {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .my_btn {
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      border: 0.1rem dashed rgba(112, 51, 255, 0.25);
    }
  }

  .my_zi {
    color: #ABA3CF;
  }

  .my_kuanbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
  }

  .my_kuan {
    width: 15rem;
    height: 20rem;
    margin-top: 1rem;
    border-radius: 2rem;
    color: #ABA3CF;
  }

  .my_kai {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #ABA3CF;
    margin-top: 1rem;
  }

  .my_cont {
    text-align: center;
    color: #ABA3CF;
  }

  .my_kuan:hover {
    background-color: #352C5D;
    color: white;
  }



}
</style>